<template>
    <div>
        <!-- <h4>Login组件</h4> -->
        <van-nav-bar title="商城登录" left-text="返回" left-arrow @click-left="onClickLeft" />

        <!-- 表单 登录模块 -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <!-- 通过 pattern 进行正则校验 -->
                <van-field v-model="loginname" type="text" name="loginname" label="用户名" placeholder="用户名" :rules="[
                    { required: true, message: '请填写用户名' },
                    { pattern, message: '请输入正确的2-11位用户名' },

                ]" />

                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" :rules="[
                    { required: true, message: '请填写密码' },
                    { pattern, message:'请填写正确的2-11位密码'}]" />
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>                
            </div>            
        </van-form>

        <span >去注册</span>
        <van-cell-group class="reg">
            <!-- <van-cell title="单元格" value="内容" /> -->            
            <van-cell title="快速注册"  is-link to="/register" />
        </van-cell-group>

    </div>
</template>
 
<script setup lang="ts">

import { ref } from 'vue';
import { getLogin} from '@/api/user'
import { useUserStore } from '@/store/useStore'
import { useRouter } from 'vue-router';

const onClickLeft = () => history.back();

const loginname = ref('');
const password = ref('');

const pattern = /^\S{2,11}$/;
//  .  : 匹配除换行符 \n 之外的任何单字符
//  \s 是匹配所有空白符，包括换行，\S 非空白符，不包括换行。

const user = useUserStore();  // 创建pinia实例
const router = useRouter();  // 路由跳转方法


const onSubmit = async (values) => {
    // console.log('submit', values,22222222);
    // 提交  1.获取用户输入的用户名和密码
    // 2. 发送请求
    // 3. 判断请求是否成功
    // 4. 成功后存储用户的id， 或者用户名  然后跳转到首页

    let res = await getLogin(values)
    // console.log(res,444444);

    if(res.data?.userid){  // 如果有
        // localStorage.setItem('userid',res.data.userid)
        user.setUserId(res.data.userid);   // 就把userid存到本地
        router.push('/')    // 然后跳转到首页
    }  
};
</script>
 
<style scoped lang="scss">
// https://juejin.cn/post/7090570269495918599 (vue 样式穿透的集中形式)

// 框架里面的样式
// 1. 组件名就是 类名
// 2. 如果要更改组件里面的样式， 要加上 :deep  表示样式穿透
//   :deep(.van-nav-bar_title)  固定写法
.van-nav-bar {
    margin-bottom: 15px;
    background-color: skyblue;

    :deep(.van-nav-bar__title){
        color: red;
    }
    :deep(.van-nav-bar__text){
        color:red;
        font-weight: 700;
    }
    :deep(.van-nav-bar__arrow){
        color: red;
    } 
}

span{
    margin-left: 15px;
}
.van-button--normal{
    // background: pink;
    border: none;
    color: pink;
    font-size: 20px;
}
.reg{
    margin-top: 5px;
}
</style>